<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>公众号信息-带参二维码数据详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入对应模块的css -->
    <link rel="stylesheet" href="../css/parmsErwm-data.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar ref="topbar"></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边导航 -->
            <div class="leftBox">
                <left-site></left-site>
            </div>
            <div class="pageContent fffBackground">
                <section class="title-weizhi">您当前所在的位置：公众号名称>公众号信息</section>
                <section class="daicantitle">
                    数据详情
                </section>
                <section class="" style="line-height:60px;padding-left:20px;font-size:14px;color:#333333">
                    <span style="margin-right:50px;">二维码名称: 9.15线下引流二维码</span><span>创建时间: 2019-08-14</span>
                </section>
                <section class="xuzhi">
                    <h3>带参二维码数据说明</h3>
                    <p>1. 扫码次数：用户每次扫码都记录次数，数据未去重</p>
                    <p>2. 关注次数：用户可以多次扫码关注、取消关注，每次扫码关注都记录次数，数据未去除</p>
                    <p>3. 关注人数：记录活动期间关注数量，已去重处理</p>
                </section>
                <section class="charts-title">
                    <h1>渠道码时段数据统计</h1>
                    <div>
                        <span @click="chooseDay(index)" :class="{'activeBtn':currenIndex==index}"
                            v-for="(item,index) in ['最近三十天','最近七天']" :key="index"
                            style="display:inline-block;width:99px;text-align:center;line-height:30px;border-radius:2px;border:1px solid #D7D7D7;cursor:pointer;">
                            {{item}}
                        </span>
                        <select
                            style="width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;padding-left:34px;outline:none;">
                            <option>2019-7-10至2019-8-9</option>
                            <option>2019-7-10至2019-8-9</option>
                        </select>

                        <p style="float:right" style="color:#333333">最近7天数据统计：共扫描 <span style="color:#FF9933;font-size:16px;">1522</span> 人，关注<span style="color:#669900;font-size:16px;">101</span>次，新增关注<span style="color:#CC0000;font-size:16px;">421</span>人</p>
                    </div>
                </section>
                <section class="charts-cont">
                    <div id="chartLine" style="height: 400px;width:100%"></div>

                </section>
            </div>
        </div>

    </div>


</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>

<script src="../js/public.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            dialogdata: null,
            dialogShow: false,
            currenIndex: 1,
            monidata: [
                { time: '2019/8/1', 'scansCount': 100, 'guanzhuCount': 12, 'guanzhuPeople': 88 },
                { time: '2019/8/2', 'scansCount': 300, 'guanzhuCount': 62, 'guanzhuPeople': 18 },
                { time: '2019/8/3', 'scansCount': 200, 'guanzhuCount': 22, 'guanzhuPeople': 58 },
                { time: '2019/8/4', 'scansCount': 546, 'guanzhuCount': 102, 'guanzhuPeople': 188 },
                { time: '2019/8/5', 'scansCount': 600, 'guanzhuCount': 212, 'guanzhuPeople': 108 },
                { time: '2019/8/6', 'scansCount': 400, 'guanzhuCount': 102, 'guanzhuPeople': 68 },
                { time: '2019/8/7', 'scansCount': 380, 'guanzhuCount': 152, 'guanzhuPeople': 188 },
            ]
        },
        created: function () {
            //public.ceshi()

        },
        mounted: function () {
            //this.$refs['topbar'].ce();
            this.initEchart()
        },
        methods: {
            chooseDay: function (index) {
                this.currenIndex = index;
            },
            initEchart: function () {
                let Detail = {
                    time:[],
                    scansCount:[],
                    guanzhuCount:[],
                    guanzhuPeople:[]
                };
                let moniData = this.monidata;
                let lineChart = document.getElementById('chartLine');
                let myChartLine = echarts.init(lineChart);
                for (let i = 0,l=moniData.length; i<l;i++){
                    Detail.time.push(moniData[i]['time']);
                    Detail.scansCount.push(moniData[i]['scansCount']);
                    Detail.guanzhuCount.push(moniData[i]['guanzhuCount']);
                    Detail.guanzhuPeople.push(moniData[i]['guanzhuPeople']);
                }


                let optionLine = {
                    animation: true,//是否开启动画
                    legend: {
                        top: 20,
                        left: 'center',
                        data: ['扫描次数', '关注次数', '关注人数'],
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {//指示器当鼠标悬停显示信息指示
                            type: 'cross',//十字准星指示器 ('line' 直线指示器)('shadow' 阴影指示器)('none' 无指示器)
                            label: {//坐标轴指示器的文本标签默认不显示当type为cross自动开启
                                backgroundColor: '#6a7985'
                            }
                        },
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                        textStyle: {
                            color: '#fff'
                        },

                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                    },
                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            min: 'dataMin',
                            max: 'dataMax',
                            data: Detail.time,
                            splitLine: {//显示分割线 类似网格
                                show: true,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',

                        }
                    ],
                    series: [
                        {
                            name: '扫描次数',
                            type: 'line',
                            data: Detail.scansCount,
                            //stack: '总',
                            symbolSize: 5,
                            symbol: "circle",//设置折现点为实心圆点
                            // areaStyle: {//堆叠图区域颜色
                            //     color: '#abd9cd'
                            // },
                            //smooth: true,//是否平滑
                            lineStyle: {//折线段的样式
                                color: '#6ec729'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#6ec729',
                                borderType: 'solid',
                                borderColor: '#6ec729',

                            }
                        },
                        {
                            name: '关注次数',
                            type: 'line',
                            data: Detail.guanzhuCount,
                            //stack: '总',
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#87CEFA',
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#87CEFA',
                                borderType: 'solid',
                                borderColor: '#87CEFA',

                            }
                        },
                        {
                            name: '关注人数',
                            type: 'line',
                            data: Detail.guanzhuPeople,
                            //stack: '总',
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#DA70D6'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#DA70D6',
                                borderType: 'solid',
                                borderColor: '#DA70D6',

                            }
                        },

                    ]

                };
                myChartLine.setOption(optionLine, true);
            }
            
        },
    })
</script>

</html>